<template>
    <div class="list " ref="wrapper">
      <div class="content">


        <div class="area">
           <div class="title border-topbottom">当前城市</div>
           <div class="button-list">
             <div class="button-wrapper">
               <div class="button" >{{this.city}}</div>
             </div>
           </div>
        </div>

        <div class="area">
          <div class="title border-topbottom">热门城市</div>
          <div class="button-list">
            <div class="button-wrapper" v-for="item in hotCities" :key="item.id">
              <div class="button" @click="handleCityclick(item.name)">{{item.name}}</div>
            </div>

          </div>
        </div>

        <div
          class="area"
          v-for="(item,key) in cities"
          :key="key"
          :ref="key"

        >
            <div class="title border-topbottom" :id="key">{{key}}</div>
            <div class="item-list">
                  <div class="item border-bottom"
                       v-for="(inner,index) in item"
                       :key="inner.id"
                       @click="handleCityclick(inner.name)"
                  >
                    {{inner.name}}
                  </div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import {mapState,mapMutations} from 'vuex'

    export default {
        name: "List",
      props:{
          cities:Object,
          hotCities:Array,
          letter:String
      },
      data(){
          return{
                  //scroll:null
          }
      },
       computed:{
         ...mapState(['city'])//把公用属性city映射到computed计算属性（也可以映射对象）
       },
      methods:{
        handleCityclick(city){
          console.log(city)
          this.changeCity(city)
          //this.$store.dispatch('changeCityy',city)
          this.$router.push('/')//跳转到home首页
          //先dispatch到actions的changeCityy里面然后commit到mutations里面的changeCity
          //this.$store.commit('changeCity',city)可以直接commit传入mutations里面changeCity
          },
        ...mapMutations(['changeCity'])
        //把store里面mutations的changeCity函数映射到methods里面的也叫changeCity的函数
      },
      watch:{
        letter(neww,oldd){
          if (this.letter) {
            const element = this.$refs[neww][0]
            console.log(element)
           this.scroll.scrollToElement(element)

            console.log(this.$refs[this.letter])
        //window.location.hash=neww  也可以用hash方法，在router里面设置mode:'history'  默认是hash

          }

          console.log(neww+"list响应 有接受来自city的letter信息"+this.letter+oldd);
          //  this.$refs[this.letter][0].style.backgroundColor="red"  //可行
         // console.log(this.$refs.wrapper)//因为是独立的只有一个。如果多个要像上面letter一样[0]
// this.$refs[this.letter].style.backgroundColor="red"不能变红是因为还包含了prototy属性，需要具体到第一个元素

         //document.querySelector("#"+this.letter).style.backgroundColor="red";可以
        //console.log(this.$refs.wrapper[0])为什么是undifined
        //   this.$nextTick(()=>{
        //     this.$refs[this.letter][0].style.backgroundColor="red";
        //   })

         // this.scroll.scrollToElement(document.querySelector("#"+this.letter))
        }
      },
      mounted(){
      //  window.scrollTo(100,500)
        let wrapper = this.$refs.wrapper;
        //let scroll = new BScroll(wrapper,{ mouseWheel: true, taps:true,click: true, tap: true,probeType:3 }
          this.scroll = new BScroll(wrapper,{ click: true, tap: true,probeType:3 });



      }
    }
</script>

<style lang="stylus" scoped>
  .border-topbottom
     &:before
        color:#0c59e9
     &:after
        color:#0ff111
  .border-bottom
    &:before
      border-color: #ccc

  .list
     position:absolute
     overflow:hidden
     left:0
     top:1.55rem
     right:0
     bottom:0

     .title
        height:0.54rem
        line-height:0.54rem
        background-color:#eee
        color: #666666
        padding-left:0.2rem
      .button-list
        padding:.1rem .6rem .1rem .1rem
        overflow:hidden
        .button-wrapper
            float:left
            width: 33.33%
            .button
              margin:0.1rem
              padding:0.1rem 0
              text-align:center
              border: .02rem solid #ccc
              border-radius: .06rem
      .item-list
         .item
           line-height:.76rem
           padding-left:.2rem


</style>
